<template>
	<w-container class="page-bg plr-5 pt-16 pb-16 font-color-textPrimary font-size-8" :loading='loading'>
		<w-navbar title="被邀请人清单"></w-navbar>
		<!-- <view class="flex flex-ai-center">
			<view class="font-color-999 mr-4">交易时间</view>
			<u-icon name="arrow-down" color="#999"></u-icon>
		</view>
		<u-gap height="16"></u-gap> -->
		 <view class="flex flex-ai-center">
			 <view class="nickName height border">昵称</view>
			 <view class="join_time height border">加入时间</view>
			 <view class="index_pay_time height border">首次交易日期</view>
			 <view class="all_pay_price height border">总交易金额</view>
			 <view class="month_pay_price height border">本自然月交易金额</view>
		 </view>
		 <view v-for="(item,index) in list" :key="index" class="flex flex-ai-center">
			 <view class="nickName height border text-overflow">{{item.nickname}}</view>
			 <view class="join_time height border">{{item.jointime | formatDate}}</view>
			 <view class="index_pay_time height border">{{item.first_transaction_time}}</view>
			 <view class="all_pay_price height border">{{item.user_transaction}}</view>
			 <view class="month_pay_price height border">{{item.month_transaction}}</view>
		 </view>
		 <w-loading v-if="!list.length" type="empty" emptyType="search" emptyTop="100"></w-loading>
	</w-container>
</template>

<script>
	import { bei_yao_list } from "@/api/user/index"
	export default {
		data() {
			return {
				loading:false,
				list:[]
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList(){
				bei_yao_list().then( res => {
					this.list = res.data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.border {
		border:0.5rpx solid #F8931F;
	}
	.height {
		height: 94rpx;
	}
	.com {
		@extend .flex,.flex-ai-center,.flex-js-center;
	}
	.nickName {
		width: 10%;
		@extend .com;
	}
	.join_time {
		width: 20%;
		@extend .com;
	}
	.index_pay_time {
		width: 25%;
		@extend .com;
	}
	.all_pay_price {
		width: 25%;
		@extend .com;
	}
	.month_pay_price {
		width: 30%;
		@extend .com;
	}
</style>
